<script setup>
import { computed, onMounted, ref } from 'vue'

const custom = uni.getMenuButtonBoundingClientRect()
const { statusBarHeight } = uni.getWindowInfo()

const prop = defineProps({
	go: {
		type: Boolean,
		default: false
	},
	content: {
		type: Boolean,
		default: false
	}
})

const customBarHeight = computed(() => {
	return custom.bottom + ((custom.top - statusBarHeight) <= 4 ? (custom.top - statusBarHeight) + 4 : (custom.top - statusBarHeight))
})

const navBarStyle = computed(() => {
	return {height: customBarHeight.value + 'px', position: 'fixed', zIndex: 29090}
})

const barStyle = computed(() => {
	return {height: customBarHeight.value + 'px', paddingTop: statusBarHeight + 'px', backgroundColor: '#FFFFFF', zIndex: 29090}
})

const customBackStyleInfo = computed(() => {
	return { width: custom.width, height: custom.height, left: uni.upx2px(750) - custom.right }
})

const contentStyle = computed(() => {
	const heightValue = (customBarHeight.value - statusBarHeight) + 'px'
	var widthValue = '100%'
	if(prop.go) {
		if(prop.content) {
			widthValue = 'calc(100% - 340rpx)'
		}else {
			var value = (customBackStyleInfo.value.width + customBackStyleInfo.value.left) * 2
			widthValue = `calc(100% - ${value}px)`
		}
	}
	return {top: statusBarHeight + 'px', height: heightValue, lineHeight: heightValue, width: widthValue}
})
</script>

<template>
	<view class="tn-custom-nav-bar-class tn-custom-nav-bar" :style="[navBarStyle]">
		<view class="tn-custom-nav-bar__bar tn-custom-nav-bar__bar--fixed" :style="[barStyle]">
			<view v-if="go">
				<view :style="{
					width: customBackStyleInfo.width - 44 + 'px',
					height: customBackStyleInfo.height + 'px',
					marginLeft: customBackStyleInfo.left + 'px'
				}">
					<slot name="back"></slot>
				</view>
			</view>
			<view class="tn-custom-nav-bar__bar__content" :style="[contentStyle]">
				<slot></slot>
			</view>
			<view>
			  <slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.tn-custom-nav-bar {
	display: block;
	position: relative;
	
	&__bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
		min-height: 0px;
		/* #ifdef MP-WEIXIN */
		padding-right: 220rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		padding-right: 150rpx;
		/* #endif */
		box-shadow: 0rpx 0rpx 0rpx;
		z-index: 9999;
		
		&--fixed {
			position: fixed;
			width: 100%;
			top: 0;
		}
		
		&__content {
		  position: absolute;
		  text-align: center;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  margin: auto;
		  font-size: 32rpx;
		  cursor: none;
		  // pointer-events: none;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		  overflow: hidden;
		}
	}
}
</style>